<template>
  <transition 
    :name="transition"
    appear
    :appear-active-class="enterClass"
    :enter-class="enterClass"
    :leave-active-class="leaveClass"
    @beforeEnter="beforeEnter"
    @afterEnter="afterEnter"
    @beforeLeave="beforeLeave"
    @afterLeave="afterLeave"
  > 
  <template v-if="show">
    <div class="modal-wrapper" :class="customeClass" v-show="!isHide">
      <div class="modal-mask" @click="staticDeactive"></div>
      <div class="modal-container" :class="width ? '' : sizeClass" :style="{width: (width && width.indexOf('%') > -1 ? width : width + 'px'), minWidth: (minWidth && minWidth.indexOf('%') > -1 ? minWidth : minWidth + 'px')}">
        <div class="modal-header">
          <slot name="title">
            <h3>{{titleTxt}}</h3>
          </slot>
          <slot name="modal-icon-close">
            <a class="close" @click.prevent="iconClose" v-if="showCloseIcon">&times;</a>
          </slot>
        </div>
        <slot name="modal-body">
          <div class="modal-body">
            <p>{{bodyTxt}}</p>
          </div>
        </slot>
        <slot name="modal-footer">
          <div class="modal-footer">
            <slot name="cancelBtn">
              <button class="ake_btn ake_btn_text modal-close" @click="deactive">{{cancelTxt}}</button>
            </slot>
            <slot name="yesBtn">
              <button class="ake_btn ake_btn_blue modal-yes" @click="confirm">{{yesTxt}}</button>
            </slot>
          </div>
        </slot>
      </div>
    </div>
  </template>
    
  </transition>
</template>

<script>
import basicModal from '../../mixins/modal/basicModal.js'
export default {
  mixins: [basicModal],
  data () {
    return {
    }
  }
}
</script>

<style lang="less">
@import '../../assets/less/base/variables.less';
@import '../../assets/less/mixins/border-radius.less';
.modalIn, .modalOut{
  opacity: 0;
  .modal-mask {
    opacity: 0;
  }
  .modal-container {
    transform: scale(0.5);
  }
}
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 15%;
  transition: all .2s ease;
  z-index: 1800;
}
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
}
.modal-container {
  background-color: @white;
  border-radius: @spacing / 2;
  display: flex;
  flex-direction: column;
  z-index: 1850;
  transition: transform .3s ease;
  .el-form-item__label {
    color: @black;
  }
  &.modal-sm {
    width: 396px;
    .modal-body {
      display: flex;
      align-items: center;
    }
  }
  &.modal-md {
    width: 680px;
    .modal-footer {
      padding-left: 20%;
      padding-right: 20%;
    }
  }
  &.modal-lg {
    width: 996px;
    .modal-footer {
      padding-left: 25%;
      padding-right: 25%;
    }
  }
  .modal-header, .modal-footer {
    height: 50px;
    line-height: 50px;
    color: @white;
  }
  .modal-header {
    background-color: lighten(@blue, 5%);
    .border-top-radius(@spacing / 2);
    padding-left: @spacing * 2;
    padding-right: @spacing * 2;
    position: relative;
    h3 {
      font-size: 16px;
    }
    .close {
      position: absolute;
      top: 0px;
      right: @spacing;
      display: inline-block;
      font-size: 27px;
      width: 30px;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: @greydd;
      }
    }
  }
  .modal-footer {
    width: 100%;
    background-color: @greyee;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15%;
    padding-right: 15%;
    .border-bottom-radius(@spacing / 2);
    .ake_btn {
      padding-left: 0;
      padding-right: 0;
      width: 100px;
      +.ake_btn {
        margin-left: 30%;
      }
    }
  }
  .modal-body {
    flex: 1;
    min-height: 130px;
    padding: @spacing * 2;
    > p {
      font-size: 16px;
      letter-spacing: 1px;
    }
    .form-group {
      width: 100%;
      margin-bottom: @spacing * 2;
    }
  }
}

.header-box {
  margin-right: 30px;
  display: flex;
  justify-content: space-between;
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: @green;
    border-color: @green;
  }
  .header-selection-group {
    .control-label {
      padding-right: @spacing;
    }
    .select-area {
      max-width: 160px;
    }
  }
}
</style>
